<template>
  <div class="detail-container">
    <!-- 武学基本信息 -->
    <div class="skill-header">
      <image class="skill-icon" :src="getSkillIcon(skill.icon)" mode="aspectFit" />
      <div class="skill-info">
        <div class="skill-name">{{ skill.name }}</div>
        <div class="skill-level">Lv.{{ skill.level }}/{{ skill.maxLevel }}</div>
        <div class="skill-type" :class="skill.type">{{ getTypeText(skill.type) }}</div>
        <div v-if="skill.equipped" class="equipped-status">已装备</div>
      </div>
    </div>

    <!-- 武学描述 -->
    <div class="skill-description">
      <div class="section-title">武学描述</div>
      <text class="description-text">{{ skill.description }}</text>
    </div>

    <!-- 当前等级效果 -->
    <div class="skill-effects">
      <div class="section-title">当前效果 (Lv.{{ skill.level }})</div>
      <div class="effect-list">
        <div 
          class="effect-item" 
          v-for="effect in currentEffects" 
          :key="effect.type"
        >
          <text class="effect-name">{{ effect.name }}：</text>
          <text class="effect-value">{{ effect.value }}</text>
        </div>
      </div>
    </div>

    <!-- 下一级效果预览 -->
    <div class="next-level-effects" v-if="skill.level < skill.maxLevel">
      <div class="section-title">下一级效果 (Lv.{{ skill.level + 1 }})</div>
      <div class="effect-list">
        <div 
          class="effect-item" 
          v-for="effect in nextLevelEffects" 
          :key="effect.type"
        >
          <text class="effect-name">{{ effect.name }}：</text>
          <text class="effect-value next-level">{{ effect.value }}</text>
          <text class="effect-increase">(+{{ effect.increase }})</text>
        </div>
      </div>
    </div>

    <!-- 升级条件 -->
    <div class="upgrade-requirements" v-if="skill.level < skill.maxLevel">
      <div class="section-title">升级条件</div>
      <div class="requirement-list">
        <!-- 等级要求 -->
        <div class="requirement-item">
          <text class="requirement-name">玩家等级：</text>
          <text 
            class="requirement-value" 
            :class="{satisfied: playerLevel >= upgradeRequirements.level}"
          >
            {{ playerLevel }}/{{ upgradeRequirements.level }}
          </text>
        </div>
        
        <!-- 资源要求 -->
        <div 
          class="requirement-item" 
          v-for="resource in upgradeRequirements.resources" 
          :key="resource.type"
        >
          <text class="requirement-name">{{ getResourceName(resource.type) }}：</text>
          <text 
            class="requirement-value" 
            :class="{satisfied: getPlayerResource(resource.type) >= resource.amount}"
          >
            {{ getPlayerResource(resource.type) }}/{{ resource.amount }}
          </text>
        </div>
        
        <!-- 武学残卷要求 -->
        <div class="requirement-item" v-if="upgradeRequirements.scrolls > 0">
          <text class="requirement-name">{{ skill.name }}残卷：</text>
          <text 
            class="requirement-value" 
            :class="{satisfied: playerScrolls >= upgradeRequirements.scrolls}"
          >
            {{ playerScrolls }}/{{ upgradeRequirements.scrolls }}
          </text>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <!-- 升级按钮 -->
      <button 
        class="upgrade-btn" 
        :class="{disabled: !canUpgrade}"
        :disabled="!canUpgrade"
        @click="upgradeSkill"
        v-if="skill.level < skill.maxLevel"
      >
        {{ upgrading ? '升级中...' : '升级武学' }}
      </button>
      
      <!-- 满级提示 -->
      <div class="max-level-tip" v-if="skill.level >= skill.maxLevel">
        <text>武学已达到最高等级</text>
      </div>
      
      <!-- 装备/卸下按钮 -->
      <button 
        class="equip-btn" 
        :class="skill.equipped ? 'unequip' : 'equip'"
        @click="toggleEquip"
        :disabled="equiping"
      >
        {{ equiping ? '操作中...' : (skill.equipped ? '卸下武学' : '装备武学') }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      skillId: '',
      skill: {},
      playerLevel: 25,
      playerResources: {
        gold: 10000,
        exp: 5000,
        spirit: 800
      },
      playerScrolls: 0,
      upgrading: false,
      equiping: false,
      loading: true
    }
  },
  
  computed: {
    // 当前等级效果
    currentEffects() {
      if (!this.skill.effects) return [];
      return this.skill.effects.map(effect => ({
        ...effect,
        value: this.calculateEffectValue(effect, this.skill.level)
      }));
    },
    
    // 下一级效果
    nextLevelEffects() {
      if (!this.skill.effects || this.skill.level >= this.skill.maxLevel) return [];
      const nextLevel = this.skill.level + 1;
      return this.skill.effects.map(effect => {
        const currentValue = this.calculateEffectValue(effect, this.skill.level);
        const nextValue = this.calculateEffectValue(effect, nextLevel);
        return {
          ...effect,
          value: nextValue,
          increase: nextValue - currentValue
        };
      });
    },
    
    // 升级要求
    upgradeRequirements() {
      if (!this.skill.upgradeCosts || this.skill.level >= this.skill.maxLevel) {
        return { level: 0, resources: [], scrolls: 0 };
      }
      return this.skill.upgradeCosts[this.skill.level] || { level: 0, resources: [], scrolls: 0 };
    },
    
    // 是否可以升级
    canUpgrade() {
      if (this.skill.level >= this.skill.maxLevel) return false;
      
      // 检查等级要求
      if (this.playerLevel < this.upgradeRequirements.level) return false;
      
      // 检查资源要求
      for (const resource of this.upgradeRequirements.resources) {
        if (this.getPlayerResource(resource.type) < resource.amount) {
          return false;
        }
      }
      
      // 检查残卷要求
      if (this.upgradeRequirements.scrolls > 0 && this.playerScrolls < this.upgradeRequirements.scrolls) {
        return false;
      }
      
      return true;
    }
  },
  
  onLoad(options) {
    this.skillId = options.id;
    this.loadSkillDetail();
  },
  
  methods: {
    // 获取武学详情
    async loadSkillDetail() {
      this.loading = true;
      try {
        // 使用新的API调用方式
        const api = await import('@/api');
        const result = await api.characterApi.getSkillDetail(this.skillId);
        
        this.skill = result.data;
        // 加载玩家残卷数量
        await this.loadPlayerScrolls();
      } catch (error) {
        console.error('加载武学详情失败:', error);
        uni.showToast({
          title: error.message || '网络错误',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 加载玩家残卷数量
    async loadPlayerScrolls() {
      try {
        // 使用新的API调用方式
        const api = await import('@/api');
        const result = await api.characterApi.getPlayerScrolls();
        
        const scrollData = result.data.find(item => item.skillId === this.skillId);
        this.playerScrolls = scrollData ? scrollData.count : 0;
      } catch (error) {
        console.error('加载残卷数据失败:', error);
      }
    },
    
    // 升级武学
    async upgradeSkill() {
      if (!this.canUpgrade || this.upgrading) return;
      
      this.upgrading = true;
      try {
        // 使用新的API调用方式
        const api = await import('@/api');
        const result = await api.characterApi.upgradeSkill(this.skillId);
        
        uni.showToast({
          title: '升级成功！',
          icon: 'success'
        });
        
        // 更新武学信息
        this.skill.level += 1;
        
        // 扣除资源
        for (const resource of this.upgradeRequirements.resources) {
          this.playerResources[resource.type] -= resource.amount;
        }
        
        // 扣除残卷
        if (this.upgradeRequirements.scrolls > 0) {
          this.playerScrolls -= this.upgradeRequirements.scrolls;
        }
      } catch (error) {
        console.error('升级武学失败:', error);
        uni.showToast({
          title: error.message || '网络错误',
          icon: 'none'
        });
      } finally {
        this.upgrading = false;
      }
    },
    
    // 装备/卸下武学
    async toggleEquip() {
      if (this.equiping) return;
      
      this.equiping = true;
      try {
        const action = this.skill.equipped ? 'unequip' : 'equip';
        // 使用新的API调用方式
        const api = await import('@/api');
        const result = await api.characterApi.toggleSkillEquip(this.skillId, action);
        
        this.skill.equipped = !this.skill.equipped;
        uni.showToast({
          title: this.skill.equipped ? '装备成功！' : '卸下成功！',
          icon: 'success'
        });
      } catch (error) {
        console.error('装备操作失败:', error);
        uni.showToast({
          title: error.message || '网络错误',
          icon: 'none'
        });
      } finally {
        this.equiping = false;
      }
    },
    
    // 计算效果数值
    calculateEffectValue(effect, level) {
      return effect.baseValue + (effect.growthValue * (level - 1));
    },
    
    // 获取玩家资源
    getPlayerResource(type) {
      return this.playerResources[type] || 0;
    },
    
    // 获取资源名称
    getResourceName(type) {
      const names = {
        gold: '金币',
        exp: '经验',
        spirit: '灵力'
      };
      return names[type] || type;
    },
    
    // 获取武学图标路径
    getSkillIcon(icon) {
      return `/static/icons/skills/${icon}`;
    },
    
    // 获取类型文本
    getTypeText(type) {
      return type === 'active' ? '主动' : '被动';
    }
  }
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 15px;
}

/* 武学头部信息 */
.skill-header {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.skill-icon {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  margin-right: 20px;
}

.skill-info {
  flex: 1;
}

.skill-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.skill-level {
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
}

.skill-type {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  color: #fff;
  margin-right: 10px;
}

.skill-type.active {
  background-color: #ff4d4f;
}

.skill-type.passive {
  background-color: #52c41a;
}

.equipped-status {
  display: inline-block;
  padding: 4px 12px;
  background-color: #1890ff;
  color: #fff;
  border-radius: 16px;
  font-size: 12px;
}

/* 通用区块样式 */
.skill-description,
.skill-effects,
.next-level-effects,
.upgrade-requirements {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  border-left: 4px solid #1890ff;
  padding-left: 12px;
}

/* 武学描述 */
.description-text {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/* 效果列表 */
.effect-list {
  space-y: 10px;
}

.effect-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.effect-item:last-child {
  border-bottom: none;
}

.effect-name {
  font-size: 16px;
  color: #333;
  min-width: 100px;
}

.effect-value {
  font-size: 16px;
  font-weight: bold;
  color: #1890ff;
}

.effect-value.next-level {
  color: #52c41a;
}

.effect-increase {
  font-size: 14px;
  color: #52c41a;
  margin-left: 8px;
}

/* 升级要求 */
.requirement-list {
  space-y: 10px;
}

.requirement-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.requirement-item:last-child {
  border-bottom: none;
}

.requirement-name {
  font-size: 16px;
  color: #333;
  min-width: 120px;
}

.requirement-value {
  font-size: 16px;
  font-weight: bold;
  color: #ff4d4f;
}

.requirement-value.satisfied {
  color: #52c41a;
}

/* 操作按钮 */
.action-buttons {
  padding: 20px 0;
}

.upgrade-btn,
.equip-btn {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.upgrade-btn {
  background-color: #1890ff;
  color: #fff;
}

.upgrade-btn.disabled {
  background-color: #d9d9d9;
  color: #999;
}

.equip-btn.equip {
  background-color: #52c41a;
  color: #fff;
}

.equip-btn.unequip {
  background-color: #ff4d4f;
  color: #fff;
}

.max-level-tip {
  text-align: center;
  padding: 15px;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
  margin-bottom: 15px;
}

.max-level-tip text {
  font-size: 16px;
  color: #52c41a;
  font-weight: bold;
}
</style>